<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 布局练习</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>
            css 布局练习
        </h1>
    </header>
    <main>
        <section>
            <h2>Flexbox</h2>
            <p>Flex box布局模型的主要目的是提供更有效率的布局方式，尤其是当容器内元素的尺寸不固定的时候更能表现出它的优势。它能够自动识别子元素的尺寸，从而为盒装模型提供更高的灵活性。</p>
            <div class="Flexbox">
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。1</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。2</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。3</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。4</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。5</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。6</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。7</p>
            </div>
        </section>
        <section>
            <h2>column</h2>
            <p>分栏布局提供了一种将内容按列排列的方法，就像在报纸上看到的那样。但是创建的列不能单独设置样式，无法使一列比其他列大，或更改单个列的背景或文本颜色。</p>
            <div class="column">
                <p class="card">轻轻的我走了,正如我轻轻的来；我轻轻的招手，作别西天的云彩。1</p>
                <p>那河畔的金柳，是夕阳中的新娘；波光里的艳影，在我的心头荡漾。2</p>
                <p>软泥上的青荇，油油的在水底招摇；在康河的柔波里，我甘心做一条水草！3</p>
                <p>那榆荫下的一潭，不是清泉，是天上虹；揉碎在浮藻间，沉淀着彩虹似的梦。4</p>
                <p>寻梦？撑一支长篙，向青草更青处漫溯；满载一船星辉，在星辉斑斓里放歌。5</p>
                <p>但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！6</p>
                <p class="column-span">悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩。7</p>
            </div>
        </section>
        <section>
            <h2>grid</h2>
            <p>网格（Grid）是水平线和垂直线的集合，使用网格排版，可使元素在页面之间移动时不会跳动或改变宽度，从而在网站上提供更高的一致性。要定义网格，需要将display的值设为grid</p>
            <div class="grid">
                <p>one</p>
                <p>two</p>
                <p>three</p>
                <p>four</p>
                <p>five</p>
                <p>six</p>
            </div>
        </section>
        <section>
            <div class="container">
                <header>这里放置导航条 </header>
                <article>
                    <h3>文章标题</h3>
                    <p>Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips
                        and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the
                        emotions it
                        is the freshness of the deep springs of life.</p>
                    <p>Youth means a temperamental predominance of courage over timidity, of the appetite for adventure
                        over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old
                        merely by a number of years. We grow old by deserting our ideals.</p>
                    <p>Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear
                        self-distrust bows the heart and turns the spirit back to dust.</p>
                    <p>Whether 60 or 16, there is in every human being’s heart the lure of wonders, the unfailing
                        appetite for what’s next and the joy of the game of living. In the center of your heart and my
                        heart, there is a wireless station; so long as it receives messages of beauty, hope, courage and
                        power from man and from the infinite, so long as you are young.</p>
                    <p>When your aerials are down, and your spirit is covered with snows of cynicism and the ice of
                        pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch waves
                        o optimism there’s hope you may die young at 80.</p>
                </article>
                <aside>
                    <h4>侧边栏</h4>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos odio, enim iure ratione sed
                        perspiciatis
                        veniam, consequuntur eum illum voluptas tenetur ducimus. Optio, ducimus cumque maxime dolorem
                        veniam est
                        ipsam.</p>
                </aside>
                <footer>这里放置版权信息等内容</footer>
            </div>
        </section>
    </main>
    <footer></footer>
</body>

</html>